<template>
  <el-table
    :data="rolselist"
    style="width: 100%"
    :border="true"
  >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-row v-for="(item,index) in props.row.children" :key="index" :gutter="20">
          <!-- 一级标签 -->
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-tag>{{ item.authName }}</el-tag>
            </div>
          </el-col>

          <el-col :span="16">
            <!-- 二级标签 -->
            <div v-for="item2 in item.children" :key="item2.id">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-tag type="success">{{ item2.authName }}</el-tag>
                </div>
              </el-col>

              <!--三级标签 -->
              <el-col :span="12">
                <el-tag
                  v-for="item3 in item2.children"
                  :key="item3.id"
                  closable
                  type="warning"
                  @close="handleClose(props.row.id,item3.id)"
                >{{ item3.authName }}</el-tag>
              </el-col>
            </div>

          </el-col>

        </el-row>
      </template>
    </el-table-column>

    <el-table-column
      label="#"
      prop="id"
    />
    <el-table-column
      label="角色名称"
      prop="roleName"
    />
    <el-table-column
      label="角色描述"
      prop="roleDesc"
    />
    <el-table-column
      label="操作"
      prop="desc"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
        >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
        >删除</el-button>
        <el-button
          size="mini"
          type="warning"
          @click="handleRolePermissions(scope.row.id, scope.row)"
        >分配权限</el-button>

        <!-- 弹框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          @close="onClose"
        >

          <tree-table :rights-tree-list="rightsTreeList" :new-arr="arr" @clickRid="rids=$event" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editRodeList">确 定</el-button>
          </span>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getRightsTree, editEmpowerTree, delEmpowerTree } from '@/api/authority'

import TreeTable from './TreeTable.vue'
export default {
  components: { TreeTable },
  // 角色列表
  props: {
    rolselist: {
      type: Array,
      reqiured: true
    }

  },
  data() {
    return {

      dialogVisible: false,
      rightsTreeList: [], // 所有权限列表
      rids: '', // 权限 ID 列表
      roleId: [], // 角色id
      arr: []
    }
  },

  created() {

  },

  methods: {

    // 点击弹窗 并获取数据 传给子组件
    async  handleRolePermissions(id, row) {
      this.arr = []
      try {
        this.roleId = row.id // 点击的当前id
        this.dialogVisible = true// 弹窗显示
        const res = await getRightsTree('tree')
        this.rightsTreeList = res // 角色列表

        this.rolselist.forEach(item => {
          if (id === item.id) {
            this.arr.push(item.id)
            item.children.forEach(i => {
              this.arr.push(i.id)
              i.children.forEach(ii => {
                this.arr.push(ii.id)
              })
            })
          }
        })
        console.log(this.arr)
      } catch (err) {
        console.log(err)
      }
    },

    // 点击确认 添加角色权限
    async  editRodeList(row) {
      try {
        console.log(this.rids)
        this.rids = this.rids.join(',')
        this.dialogVisible = false
        await editEmpowerTree(this.roleId, this.rids)
        this.$message.success('分配权限成功')

        this.$emit('onSuccess')
      } catch (err) {
        console.log(err)
      }
    },
    // 关闭弹窗
    onClose() {
      console.log(11)
      this.arr = []
    },

    // 关闭标签

    async  handleClose(id, tag) {
      console.log(id)
      console.log(tag)
      const res = await delEmpowerTree(id, tag)
      console.log(res)
    }

  }
}
</script>

<style scoped lang='scss'>
 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.el-tag{
margin: 5px 10px;
}
.borderclass{
  border-bottom: 1px  solid red;
}
</style>
